<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>jSlider test</title>
	
	<!-- bin/jquery.slider.min.css -->
	<link rel="stylesheet" href="../css/jslider.css" type="text/css">
	<link rel="stylesheet" href="../css/jslider.plastic.css" type="text/css">
  <!-- end -->

	<script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
	
	<!-- bin/jquery.slider.min.js -->
	<script type="text/javascript" src="../js/jshashtable-2.1_src.js"></script>
	<script type="text/javascript" src="../js/jquery.numberformatter-1.2.3.js"></script>
	<script type="text/javascript" src="../js/tmpl.js"></script>
	<script type="text/javascript" src="../js/jquery.dependClass-0.1.js"></script>
	<script type="text/javascript" src="../js/draggable-0.1.js"></script>
	<script type="text/javascript" src="../js/jquery.slider.js"></script>
  <!-- end -->
	
	<style type="text/css" media="screen">

	 .jslider .jslider-value { font-size: 12px; }
	</style>

</head>
<body>

http://egorkhmelev.github.com/jslider/
<br /><br />
  
  <div class="layout">

    <div class="layout-slider" style="width: 100%; ">
      <span style="display: inline-block; width: 400px; padding: 0 5px;">
		<input type="checkbox" id="" /><input id="slider1" type="text" name="area" value="12;18" />
	  </span>
    </div>



    <script type="text/javascript">

	$(function(){
		  var timeSliderSetting1 = { 
			  from: 0, 
			  to: 24, 
			  heterogeneity: ['50/12','75/21'], 
			  scale: [0, '|', 2, '|', 4, '|', 6, '|',  8, '|',10, '|', 12, '|', 14, '|', 16, '|',18, '|', 20, '|', 22, '|',24 ], 
			  limits: true, 
			  round: 0,
			  step: 1,
			  dimension: '&nbsp;', 
			  skin: "plastic",
			  callback : ''
		  };

		  var oldValue1=$('#slider1').val();

		  timeSliderSetting1.callback = function(value){
		    var v = value.split(';');
			if(v[0] == v[1]){
				alert('区间选择至少1个小时');
				$('#slider1').val(oldValue1);
			}else{
				oldValue1=$('#slider1').val();
				alert('changed: ' + value + ' slider1: ' + $('#slider1').val() + ' v0: ' + v[0] + ' v1: ' + v[1]);
			}
			
		  }

		  jQuery("#slider1").slider(timeSliderSetting1);
     });

    </script>

  </div>
</body>
</html>